<template>
  <div class="mytodos">
    <!-- 标题开始 -->
    <div class="mytodos-header">
      <h1>todos</h1>
    </div>
    <!-- 标题结束 -->
    <!-- 内容开始 -->
    <div class="mytodos-content">
      <!-- 顶部开始 -->
      <div class="mytodos-content-top">
        <div
          :class="['content-top-left', { allchecked: true }]"
          @click.stop="handeleAllCheck"
        >
          >
        </div>
        <div class="content-top-right">
          <input
            type="text"
            v-model="inputVal"
            v-focus
            @keyup.enter="saveTodo"
          />
        </div>
      </div>
      <!-- 顶部结束 -->
      <!-- 中间列表开始 -->
      <div class="mytodos-content-mid">
        <div class="content-mid-list">
          <!-- 显示todos框,需要用到循环，因为最下面有显示按钮展示不同状态位的todo -->
          <div
            class="mid-list-item"
            v-for="(item, index) in filterTodos"
            :key="item.id"
          >
            <!-- 双击后可编辑当前输入框todo -->
            <div class="list-item-left">
              <input
                type="checkbox"
                v-model="item.status"
                @dblclick="handleEditTodo(index)"
              />
              <!-- 当被点击的行是本行时，.hidden就生效，那这个span元素隐藏 -->
              <span :class="['title', { hidden: edit_index === index }]">{{
                item.text
              }}</span>
              <!-- a当点击的不是本行的时候，那我input就隐藏.b失焦设置 -->
              <input
                type="text"
                v-model="item.text"
                :class="[{ hidden: edit_index !== index }]"
                @blur="saveEditTodo"
              />
            </div>
            <!-- {completed:item.status}表示是否显示这个class,取决于他的状态位，如果是true就显示 -->
            <div :class="['list-item-mid', { completed: item.status }]"></div>
            <!-- 点击删除本行todo -->
            <div class="list-item-right" @click="deleteTodo(index)">X</div>
          </div>
        </div>
      </div>
      <!-- 中间列表结束 -->
      <!-- 底部功能栏开始 -->
      <div class="mytodos-content-bottom">
        <div class="content-bottom-left">{{ remaining }} 项剩下</div>
        <div class="content-bottom-mid">
          <div
            @click.stop="handleItemClick('all')"
            :class="['mid-left', { active: activeTab === 'all' }]"
          >
            全部
          </div>
          <div
            @click.stop="handleItemClick('active')"
            :class="['mid-mid', { active: activeTab === 'active' }]"
          >
            激活
          </div>
          <div
            @click.stop="handleItemClick('completed')"
            :class="['mid-right', { active: activeTab === 'completed' }]"
          >
            完成
          </div>
        </div>
        <div class="content-bottom-right" @click="handleClearCompleted">
          清除已完成
        </div>
      </div>
      <!-- 底部功能栏结束 -->
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 存放数据
    return {
      inputVal: "",
      edit_index: -1, // -1 表示没有编辑 0 正在编辑第0行,默认-1.
    };
  },
computed:{
  ...mapGetters(["filterTodos","allchecked","remaining","activeTab"])
},
  methods: {
    // 1.保存todo
    saveTodo: function () {
      if (!this.inputVal) {
        this.$message({
          type: "warning",
          message: "输入不能为空",
        });
        return false;
        //上面的意思表示如果input框输入是空就显示如上内容且不保存
      }
      // 用commit对象的方式提交，加载输入框内容，状态，和第几个
      this.$store.commit({
        type: "addTodo",
        payload: {
          text: this.inputVal,
          status: false, //刚加入的todo是没有被选中的，所以状态位是false,也就是active
          id: Date.now(),
        },
      });
    },

    // 2.双击输入框编辑todo
    handleEditTodo: function (index) {
      // 传参索引是为了知道在编辑哪一个todo
      console.log("正在编辑", index, "行");
      this.edit_index = index;
    },

    // 3.todo的input框失焦,当我没有编辑这一行的时候就是失焦
    saveEditTodo: function () {
      this.edit_index = -1;
    },

    // 4.点击删除本行todo，由于这个操作的数据是变化的，我会把它放在store里面
    deleteTodo: function (index) {
      // this.todos.splice(index, 1);//arr.spalice(从哪个索引开始，截取几个，替换的新元素)
      this.$store.commit({
        type: "deletTodo",
        payload: {
          index: index,
        },
      });
    },

    // 5.底部功能栏 筛选
    handleItemClick: function (activeTab) {
      this.$store.commit({
        type: "changeActiveTab",
        payload: {
          activeTab,
        },
      });
    },

    // 6.清除已完成
    handleClearCompleted:function(){
      this.$store.commit("handleClearCompleted")
    },

  },
    // 7.失焦事件
    directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
};
</script>
<style lang='less' scoped>
.hidden {
  display: none;
}
.show {
  display: block;
}
.mytodos {
  width: 50vw;
  margin: 0 auto;
  .mytodos-header {
    h1 {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }

  .mytodos-content {
    border: 1px solid #ddd;
    .mytodos-content-top {
      margin-top: 5px;
      padding: 5px;
      height: 30px;
      display: flex;
      .content-top-left {
        height: 30px;
        flex: 1;
        text-align: center;
        // transform: rotate(90deg);
      }
      .allchecked {
        color: red;
      }

      .content-top-right {
        height: 30px;
        flex: 8;
        input {
          height: 100%;
          width: 100%;
        }
      }
    }
    .mytodos-content-mid {
      .content-mid-list {
        .mid-list-item {
          height: 50px;
          display: flex;
          align-items: center;
          .list-item-left {
            display: flex;
            justify-content: center;
            flex: 1;
            input {
            }
          }

          .list-item-mid {
            flex: 8;
            .title {
            }
          }
          .completed {
            color: #ddd;
            text-decoration: line-through;
          }

          .list-item-right {
            visibility: hidden;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
        .mid-list-item:hover {
          .list-item-right {
            visibility: visible;
            cursor: pointer;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
      }
    }
    .mytodos-content-bottom {
      padding: 5px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content-bottom-left {
      }

      .content-bottom-mid {
        display: flex;
        .active {
          border: 1px solid pink;
        }
        .mid-left {
          margin-right: 5px;
        }

        .mid-mid {
          margin-right: 5px;
        }

        .mid-right {
          margin-right: 5px;
        }
      }

      .content-bottom-right {
      }
    }
  }
}
</style>